<!--
 * @Author: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @Date: 2024-03-01 16:00:15
 * @LastEditors: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @LastEditTime: 2024-03-06 10:31:16
 * @FilePath: \ycq\ycq\ycq1.0\src\pages\manager\adaptMsg.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @Date: 2024-03-01 16:00:15
 * @LastEditors: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @LastEditTime: 2024-03-01 17:38:29
 * @FilePath: \ycq\ycq\ycq1.0\src\pages\manager\adaptMsg.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div>
      <div class="header">
        <a-button @click="deleteRows" class="delRows">批量删除</a-button>

        <Modal
          :adoptNumber="adoptNumber"
          @handleAdoptNumber="handleAdoptNumber"
          @handleGetData="handleGetData"
        />
      </div>
      <div class="userTable">
        <a-table
          :dataSource="dataSource"
          :columns="columns"
          :pagination="pagination"
          @change="handleTableChange"
          :rowKey="(record) => record"
          :row-selection="rowSelection"
        >
          <template #bodyCell="obj">
            <div v-if="obj.column.dataIndex === 'todo'">
              <a-button @click="() => handleUpdata(obj.record.adoptNumbers)"
                >修改</a-button
              >
              <a-button @click="() => handleDelete(obj.record.adoptNumbers)"
                >删除</a-button
              >
            </div>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { message } from "ant-design-vue";
import { getAdopt, deleteAdopt, deleteRecords } from "@/service/api.js";
import Modal from "./adoptMsg_modal.vue";
const pagination = ref({
  current: 1,
  total: 0,
  pageSize: 10,
  showTotal: (total) => `共 ${total} 条数据`,
  showQuickJumper: true,
});
const adoptNumber = ref(0);
const dataSource = ref([]);
const open = ref(false);
// 多选变量
const adoptNumbers = ref([]);
const selectRowsArr = ref([]);
const columns = ref([
  {
    title: "领养编号",
    dataIndex: "adoptNumbers",
    align: "center",
    key: "adoptNumbers",
  },
  {
    title: "领养条件",
    dataIndex: "term",
    align: "center",
    key: "term",
  },
  {
    title: "动物编号",
    dataIndex: "animalNumbers",
    align: "center",
    key: "animalNumbers",
  },
  {
    title: "动物介绍",
    dataIndex: "animalIntroduce",
    align: "center",
    key: "animalIntroduce",
  },
  {
    title: "操作",
    dataIndex: "todo",
    align: "center",
    key: "todo",
  },
]);

const getData = async () => {
  const res = await getAdopt({
    size: pagination.value.pageSize,
    current: pagination.value.current,
  });
  console.log(res);
  dataSource.value = res.data.records;
  pagination.value.total = res.data.total;
};
getData();
// 多选
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    // 存放选中的选项
    selectRowsArr.value = selectedRows;
  },
  onSelect: (selected, selectedRows, changeRows) => {
    console.log(selected);
    console.log(selectedRows);
    console.log(changeRows);
  },
};

//改变页数
const handleTableChange = (pageObj) => {
  // console.log(pageObj);
  pagination.value = pageObj;
  getData();
};
//删除
const handleDelete = async (adoptId) => {
  const res = await deleteAdopt({ aNumber: adoptId });
  if (res.code === 1) {
    message.success(res.data);
    getData();
  } else message.error(res.data);
};
// 修改
const handleUpdata = (id) => {
  adoptNumber.value = id;
  open.value = true;
};
//修改按钮控制isopen
const handleAdoptNumber = (adoptNum) => {
  console.log(adoptNum);

  adoptNumber.value = adoptNum;
};

//新增或修改刷新
const handleGetData = (value) => {
  getData();
};

//批量删除
const deleteRows = async () => {
  console.log(selectRowsArr.value);

  selectRowsArr.value.map((item) => adoptNumbers.value.push(item.adoptNumbers));
  const res = await deleteRecords({ array: adoptNumbers.value });
  console.log(res);
  if (res.code === 1) {
    getData();
    message.success("批量删除成功");
  } else message.error("批量删除失败");
};
</script>

<style scoped>
.header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  width: 100%;
  padding: 12px;
  .search-input {
    padding-left: 8px;
    border: none;
    background-color: #dddddd;
    border-radius: 25px;
    float: right;
    width: 200px;
  }
  .search {
    position: relative;
    height: 30px;
    right: 30px;
    top: 8px;
  }
  .delRows {
    margin-right: 20px;
  }
}
</style>
